<template>
  <div>
    <label>
      <input v-model="colorVal" type="radio" name="color" value="red" />
      红色
    </label>
    <label>
      <input v-model="colorVal" type="radio" name="color" value="pink" />
      粉色
    </label>
    <label>
      <input v-model="colorVal" type="radio" name="color" value="green" />
      绿色
    </label>

    <hr />

    <ProviedeA />
  </div>
</template>

<script setup lang="ts">
import { ref, provide, readonly } from "vue";
import ProviedeA from "./ProviedeA.vue";

const colorVal = ref("red");

// 顶层组件注入（用 readonly 包裹，禁止修改）
provide("color", readonly(colorVal));
</script>
